<template>
  <div class="container">
      <ul class="tab-wrap">
          <li class="tab-item" v-for="item in 4" :key="item">
              <p>{{item}}</p>
          </li>
      </ul>
      <article-list></article-list>
  </div>
</template>

<script>
    import ArticleList from "../../base/article-list/ArticleList";
    export default {
        components: {
            ArticleList
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
   .container {
       max-width: 1146px;
       width: 100%;
       height: 363px;
       line-height: 20px;
       border-radius: 20px;
       padding: 12px 24px;
       box-sizing: border-box;
       border: 1px solid $border-color;
       ::v-deep .container-list {
           height: auto;
       }
       .tab-wrap {
           display: flex;
           justify-content: space-between;
           column-gap: 4px;
           margin-bottom: 10px;
           .tab-item {
               flex: 1;
               display: flex;
               align-items: center;
               justify-content: center;
               height: 72px;
               border-radius: 25px;
               color: $font-gray;
               font-size: 16px;
               text-align: center;
               border: 1px solid $border-color;
               p {
                   padding: 10px;
                   box-sizing: border-box;
                   cursor: pointer;
               }
           }
       }
   }
</style>
